<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>司机注册</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input type="text" class="hidden" th:value="${#httpServletRequest.getAttribute('openid')}" id="openid">

<div class="container">
  <div class="row">
    <div class="col-xs-12" style="text-align: center; height: 50px"><h3>注册申请</h3></div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="username" class="col-xs-4 control-label">姓名：</label>
          <div class="col-xs-8">
            <input type="text" class="form-control" id="username" required>
            <span class="help-block"></span>
          </div>
        </div>
        <div class="form-group">
          <label for="phone" class="col-xs-4 control-label">联系方式：</label>
          <div class="col-xs-8">
            <input type="text" class="form-control" id="phone" required>
            <span class="help-block"></span>
          </div>
        </div>
        <div class="form-group">
          <label for="verify_code" class="col-xs-4 control-label">验证码：</label>
          <div class="col-xs-8">
            <div class="input-group">
              <input type="text" class="form-control" id="verify_code" required>
              <span class="input-group-btn">
                <input class="btn btn-default" type="button" id="send_code_btn" value="发送验证码">
              </span>
            </div>
            <span class="help-block"></span>
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-offset-4 col-xs-6">
            <div id="picDiv" style="display:block; width: 40px; height: 50px;"></div>
          </div>
        </div>
        <br>
        <br>
        <div class="form-group">
          <label for="pic" class="col-xs-4 control-label">人物照片：</label>
          <div class="col-xs-6">
            <input type="file" id="pic" name="pic" onchange="picChange()" required>
            <span class="help-block"></span>
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-offset-4 col-xs-6">
            <div id="licencePicDiv" style="display:block; width: 40px; height: 50px;"></div>
          </div>
        </div>
        <br>
        <br>
        <div class="form-group">
          <label for="licencePic" class="col-xs-4 control-label">驾驶证照片：</label>
          <div class="col-xs-6">
            <input type="file" id="licencePic" name="licencePic" onchange="licencePicChange()" required>
            <span class="help-block"></span>
          </div>
        </div>
        <button type="submit" class="btn btn-default" id="submit">提交申请</button>
      </form>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <div class="row hidden" id="verify_status">
        <div class="col-xs-12">
          申请状态：<strong id="verify">-</strong>
        </div>
      </div>
      <div class="row hidden" id="verify_remark">
        <div class="col-xs-12">
          备注：<strong id="remark">-</strong>
        </div>
      </div>
    </div>
  </div>

</div>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/ajaxfileupload.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<script src="/static/js/mycommons.js"></script>
<script src="/static/js/my-driver-func.js"></script>
<script>
  let openid, verify = -1, id

  $(function () {
    openid = $("#openid").val()

    $.get("/wx/driver/" + openid, {}, function (res) {
      if (res.flag) {
        let driver = res.data
        id = driver.id
        //填充表单数据
        $("#username").val(driver.name)
        $("#phone").val(driver.phone)
        buildPic('#picDiv', 'driver_pic', driver.pic)
        buildPic('#licencePicDiv', 'licence_pic', driver.licencePic)

        //根据审核状态给出提示信息
        verify = driver.verify
        $("#verify_status").removeClass("hidden")
        if (verify === 0) {
          $("#verify").addClass("text-info").text("待审核")
          $("#remark").parent("div").addClass("hidden")
        } else if (verify === 2) {
          $("#verify_remark").removeClass("hidden")
          $("#verify").addClass("text-danger").text("未通过")
          $("#remark").addClass("text-danger").text(driver.remark)
        }
      }
    })
  })

  // 获取元素
  let $btn = $("#send_code_btn")
  // 添加按钮的点击事件
  $btn.click(function () {
    let phone = $.trim($("#phone").val())
    if (!checkPhone(phone)) {
      return false
    }
    $.post("/wx/sendCode", {phone: phone}, function (res) {
      if (res.flag) {
        msgNotify(res.msg, 'success', 1500)
      }
    })

    // 定义一个变量存储时间的数字
    let n = 60;
    // 让按钮被禁用，替换按钮的文字内容
    $(this).prop("disabled", true).val(n + "s 后重新发送")
    // 通过定时器进行每隔 1s 减时间效果
    let timer = setInterval(() => {
      n--;
      // 文字内容发生变化
      $(this).val(n + "s 后重新发送")
      // 判断如果时间到了 0 ，就要停止定时器
      if (n <= 0) {
        clearInterval(timer)
        // 让按钮取消禁用
        $(this).val("重新发送").prop("disabled", false)
      }
    }, 1000)
  })


  //提交
  submitDriver()
</script>
</body>
</html>